<template>
	<div>
		<div style="height: 40px;width: 100%;line-height: 36px; padding-left: 20px;color:white;border-top: 2px solid #111111;border-bottom: 2px solid #383d41;">
			<span>{{'云台控制:' + (selectItem && selectItem.playerHeaderText ? selectItem.playerHeaderText : '未选摄像机') + '-' + (ptzEnable ? '云台启用' : '云台禁用') }}</span>
		</div>
		<div style="padding: 7px 17px;height: 176px;">
			<!-- <a-button type="primary" class="">Primary</a-button> -->
			<!-- <button class="transparentbtn" @click="ptzControl(1)" :disabled="ptzEnable?false:true"></button> -->
			<button class="btn arrow rotate1" @click="ptzControl(4)" :disabled="ptzEnable?false:true"></button>
			<button class="btn arrow" @click="ptzControl(0)" :disabled="ptzEnable?false:true"></button>
			<button class="btn arrow rotate2" @click="ptzControl(6)" :disabled="ptzEnable?false:true"></button>
			<button class="btn arrow rotate3" @click="ptzControl(2)" :disabled="ptzEnable?false:true"></button>
			<button class="transparentbtn" :disabled="ptzEnable?false:true" style="font-size: 16px;"><span>方向</span></button>
			<button class="btn arrow rotate4" @click="ptzControl(3)" :disabled="ptzEnable?false:true"></button>
			<button class="btn arrow rotate5" @click="ptzControl(5)" :disabled="ptzEnable?false:true"></button>
			<button class="btn arrow rotate6" @click="ptzControl(1)" :disabled="ptzEnable?false:true"></button>
			<button class="btn arrow rotate7" @click="ptzControl(7)" :disabled="ptzEnable?false:true"></button>
		</div>
		<div style="padding: 0px 17px;height: 34px;">
			<button class="small btn" @click="ptzControl(11)" :disabled="ptzEnable?false:true">-</button>
			<button class="small transparentbtn" :disabled="ptzEnable?false:true">变倍</button>
			<button class="small btn" @click="ptzControl(12)" :disabled="ptzEnable?false:true">+</button>
			<button class="small btn" @click="ptzControl(11)" :disabled="ptzEnable?false:true">-</button>
			<button class="small transparentbtn" :disabled="ptzEnable?false:true">变焦</button>
			<button class="small btn" @click="ptzControl(10)" :disabled="ptzEnable?false:true">+</button>
		</div>
		<div v-if="showSpeed" style="padding: 0px 17px;height: 34px;"> 
			<div style="float: left;height: 34px;line-height: 34px;">慢</div>
			<div style="float: left;width: 235px;padding: 0 5px;">
				<a-slider id="test" :min="0.1" :max="1" :step="0.1" v-model="speed" :disabled="ptzEnable?false:true"/>
			</div>
			<div style="float: right;height: 34px;line-height: 34px;">快</div>
		</div>
		<div :style="'height: calc(100% - 250px - ' + (showSpeed?34:0) + 'px);position: relative;cursor: default;'">
			<div style="margin: 0 10px;position: absolute;height: 26px;">
				<div style="float: left;margin-right:10px;">预置位</div>
				<!-- <a @click="positionAdd()"><a-icon type="plus-circle" style="font-size: 20px;float: left;"/></a> -->
				<a-popconfirm :disabled="ptzEnable?false:true" placement="leftBottom" @confirm="()=> positionAdd()" @visibleChange="(v)=>visibleChange(v)">
					<template slot="title">
						<p>添加预置位</p>
						<a-input placeholder="输入预置位名" v-model="posiName"/>
					</template>
					<a :disabled="ptzEnable?false:true"><a-icon type="plus-circle" style="font-size: 20px;float: left;"/></a>
				</a-popconfirm>
			</div>
			<a-list
				item-layout="horizontal"
				:data-source="savePositionList"
				size="small"
				style="position: absolute;top:26px;height: calc(100% - 26px);width: calc(100% - 20px); margin: 0 10px;font-size: 12px;overflow-y: auto;"
			>
				<a-list-item slot="renderItem" slot-scope="item" :style="'padding-top: 3px; padding-bottom: 3px; cursor: '+ (ptzEnable ? 'pointer' : 'default') +';'">					
					<!-- <a-list-item-meta
						:description="item.pid + ' : ' + item.name"
						@click="positionChoose(item)"
					>
					</a-list-item-meta> -->
					<!-- <a-popconfirm :disabled="ptzEnable?false:true" placement="top" title="选择当前预置位?" @confirm="() => positionDelete(item)">
						<a-list-item-meta
							:description="item.pid + ' : ' + item.name"
							@click="positionChoose(item)"
						>
						</a-list-item-meta>
					</a-popconfirm> -->
					<a-popconfirm :disabled="ptzEnable?false:true" placement="top" title="选择当前预置位?" @confirm="() => positionChoose(item)">
						<a-list-item-meta
							:description="item.pid + ' : ' + item.name"
						>
						</a-list-item-meta>
					</a-popconfirm>
					<div class="detailContent">
						<!-- <a @click="positionUpdate(item)"><a-icon type="environment" style="font-size: 16px;float: left;"/></a> -->
						
						<a-popconfirm :disabled="ptzEnable?false:true" placement="leftBottom" @confirm="()=> positionUpdate(item)" @visibleChange="(v)=>visibleChange(v,item)">
							<template slot="title">
								<p>刷新预置位</p>
								<a-input placeholder="输入预置位名" v-model="posiName"/>
							</template>
							<a :disabled="ptzEnable?false:true"><a-icon type="environment" style="font-size: 16px;float: left;"/></a>
						</a-popconfirm>
						
						<a-popconfirm :disabled="ptzEnable?false:true" placement="leftBottom" title="确定删除吗?" @confirm="() => positionDelete(item)">
							<a :disabled="ptzEnable?false:true"><a-icon type="delete" style="font-size: 16px;float: left;"/></a>
						</a-popconfirm>
					</div>
				</a-list-item>
			</a-list>
		</div>
	</div>
</template>

<script>
	import {
		Realtime,queryAcquisition,addAcquisition,deleteAcquisition,serveAcquisition
	} from '@/api/api'
// import pick from 'lodash.pick';
// import moment from 'moment';
// import { ACCESS_TOKEN } from '@/store/mutation-types';
// import Vue from 'vue';
export default {
	name: 'PanTilt',
	data() {
		return {
			title: '',
			savePositionList: [],
			speed: 0.1,
			showSpeed: true,
			posiName: '',
			saveCameraId:null,
		};
	},
	props:{
		selectItem: {
			type: Object,
			default: null
		},
		ptzEnable: {
			type: Boolean,
			default: false
		},
	},
	watch:{
		selectItem(val,oldUrl) {
			// this.refreshPtz();
		},
	},
	computed: {

	},
	created() {
		// this.query();
		// this.ptzControl()
		this.getSavePositionList();
	},
	methods: {
		// query(){
		// 	let postData = {
		// 		id:this.selectItem.cameraId,
		// 	}
		// 	queryAcquisition(postData).then((res) => {
		// 		console.log(res);
		// 	})
		// },
		ptzControl(key){
			console.log(key, '幅度' ,this.speed)
				this.controlnum  = key;
				console.log(this.controlnum);
				let postData = {
					id:this.selectItem.cameraId,
					speed: this.speed,
					direction: this.controlnum
				}
				console.log(postData.id);
				console.log(postData);
				Realtime(postData).then(res=>{
					console.log(res);
				})
		},
		refreshPtz(){
			// console.log('refreshPtz',this.ptzEnable);
			this.speed = 0.1
			// 刷新预置位
			if(this.selectItem && this.selectItem.cameraId){
				if(this.saveCameraId != this.selectItem.cameraId){
					this.saveCameraId = this.selectItem.cameraId
					this.getSavePositionList(this.selectItem.cameraId);
				}
				else{
					console.log('相同摄像机，不刷新预置位')
				}
			}
			else{
				// console.log('初始化为空')
				this.saveCameraId = null;
				this.savePositionList = [];
			}
		},
		getSavePositionList(cameraId){
			console.log('获取预置位列表',cameraId)
			let postData = {
				id:this.selectItem.cameraId,
			}
			queryAcquisition(postData).then((res) => {
				this.savePositionList = res.data;
				console.log(res);
			})
			// this.savePositionList = [];
			
			// 接入接口
			// this.savePositionList = [
			// 	{
			// 		pid:'pid1',
			// 		name: '预置位1'
			// 	},
			// 	{
			// 		pid:'pid2',
			// 		name: '预置位2'
			// 	},
			// 	{
			// 		pid:'pid3',
			// 		name: '预置位3'
			// 	},
			// 	{
			// 		pid:'pid4',
			// 		name: '预置位4'
			// 	},
			// 	{
			// 		pid:'pid5',
			// 		name: '预置位5'
			// 	}
			// ];
		},
		visibleChange(v,pos){
			console.log('visibleChange',pos,v)
			if(v && pos){
				this.posiName = pos.name
			}
		},
		positionAdd(){
			console.log('添加预置位',this.posiName)
			let postData ={
				presetname:this.posiName,
				id:this.selectItem.cameraId,
			}
			addAcquisition(postData).then((res) => {
				if(res.code == "00000"){
					console.log('添加成功');
					this.getSavePositionList();
				}else {
					console.log('添加失败');
				}
			})
		},
		positionUpdate(pos){
			console.log('刷新预置位',this.posiName,pos)
		},
		positionChoose(item){
			console.log('选择预置位',item)
			let postData = {
				presettoken:item.pid,
				id:this.selectItem.cameraId,
			}
			serveAcquisition(postData).then((res) => {
				if(res.code == "00000"){
					console.log('选择成功');
					this.getSavePositionList();
				}else {
					console.log('选择失败');
				}
			})
		},
		positionDelete(item){
			console.log('删除预置位',item)
			let postData = {
				presettoken:item.pid,
				id:this.selectItem.cameraId,
			}
			console.log(postData);
			deleteAcquisition(postData).then((res) =>{
				if(res.code == "00000")
				{
					console.log('删除成功');
					this.getSavePositionList();
				}else{
					console.log('删除失败');
				}
			})

		},
	},
	mounted() {
		console.log('mounted');
		this.refreshPtz();
		this.query();
		// this.ptzControl();
	}
};
</script>

<style lang="less" scoped>
.small{
	width: 40px !important;
	height:30px !important;
	line-height: 26px !important;
	font-size: 14px !important;
}
.btn{
	position: relative;
	float: left;
	width: 84px;
	height:50px;
	margin: 2px;
	color: #dddddd;
	line-height: 46px;
	text-align: center;
	background-color: #1b1e23;
	border: 2px solid #383d41;
	font-size: 16px;
	cursor:pointer;
}
.btn[disabled]{
	filter: brightness(0.6);
}
.btn:not([disabled]):hover{
	background-color: #3d4248;
}
.btn:not([disabled]):active{
	background-color: #111111;
}
.transparentbtn{
	width: 84px;
	height: 50px;
	float: left;
	background-color: transparent;
	border-width: 0;
	margin: 2px;
}
.arrow{
	
}
.arrow:after {
	content: '';
	position: absolute;
	display: block;
	width: 20px;
	height: 22px;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -11px;
	// transform: translate(-50%, -50%);
	background: url(img/arrow.png) no-repeat 50% 50%; 
}
.arrow.rotate1:after {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.arrow.rotate2:after {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.arrow.rotate3:after {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}
.arrow.rotate4:after {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.arrow.rotate5:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
.arrow.rotate6:after {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
.arrow.rotate7:after {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}
.playerHeader{
	width: 100%;
	height: 20px;
	padding-left: 10px;
	background-color: #252f2e;
	border-bottom: 1px solid #383d41;
}
a{
	color:#dddddd
}
</style>
<style lang="scss" scoped>
.ant-list-item-meta-description {
	color: #dddddd;
	font-size: 14px;
	line-height: 22px;
}
// .ant-list-sm .ant-list-item {
// 	padding-top: 3px;
// 	padding-bottom: 3px;
// 	cursor: pointer;
// }
.ant-list {
	color: #dddddd;
}
</style>